<script setup lang="ts">
import { Handle, Position } from '@vue-flow/core'
defineProps<{
  data: { label: string }
}>();
</script>

<template>
  <div class="container">
    <div class="label">
      {{ data.label }}
    </div>

    <Handle id="top" type="target" :position="Position.Top" />
    <Handle id="left" type="target" :position="Position.Left" />
    <Handle id="right" type="source" :position="Position.Right" />
    <Handle id="bottom" type="source" :position="Position.Bottom" />
  </div>
</template>

<style scoped lang="scss">
.container {
  background: orange;
  width: 10rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  box-shadow: 0 0 2px 2px orange;

  &:hover {
    border-radius: 0.5rem;
    box-shadow: 0 0 2px 4px orange;
    transition: all 0.2s ease;
    cursor: pointer;
  }
}

.label {
  margin: 0.5rem;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  // 最多显示2行
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vue-flow__handle {
  border-width: 2px;
  width: 0.5rem;
  height: 0.5rem;
  background: orange;
}
</style>
